<template>
	<el-dialog v-model="dialogVisible" title="添加分类" width="500" @close="handleClose">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm">
			<el-form-item label="上级分类" prop="parentId">
				<el-select v-model="ruleForm.parentId" placeholder="请选择">
					<el-option v-for="(item,index) in levelList" :key="index" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="分类名称" prop="name">
				<el-input placeholder="请输入分类名称" v-model="ruleForm.name"></el-input>
			</el-form-item>
			<el-form-item label="图片" prop="description">
				<uw-image
					:src="ruleForm.description" 
					:showMack="true" 
					:imageList="[ruleForm.description]"
					v-if="ruleForm.description"
					@deleteChange="ruleForm.description=''" 
				/>
				<div class="uw-update-btn uw-border-white-smoke-all uw-flex-center" @click.stop="showManager=true" v-else >
					<el-icon :size="30" color="#F5F5F5">
						<Plus />
					</el-icon>
				</div>
				<!-- <uiwu-upadte-model :limit="1" v-model="ruleForm.description" /> -->
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">关闭</el-button>
				<el-button type="primary" @click="confirm">确定</el-button>
			</div>
		</template>
		<uw-image-manager v-if="showManager" @change="changeImage" />
	</el-dialog>
</template>

<script setup lang="ts">
	/**
	 * 新增或者编辑分类
	 * @event {Function()} change 成功后的回调 
	 */
	import { ElMessage } from 'element-plus';
	import { editGoodsCateApi , addGoodsCateApi , getGoodsCateListApi } from '@/api/goods';
	import { ref , reactive, onMounted , watch} from 'vue';
	import type { FormInstance, FormRules } from 'element-plus';
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		}
	})
	const emits = defineEmits(['update:modelValue','change'])
	watch(() => props.modelValue, async (val) => {
		dialogVisible.value = val
		if(val){
			const { data } = await getGoodsCateListApi({
				page:1,
				pageSize:99
			})
			levelList.value = data
			levelList.value.unshift({
				id: 0,
				name: '顶级分类'
			})
		}
	})
	const showManager = ref(false)
	const itemId = ref(0);
	const ruleFormRef = ref<FormInstance>()
	const levelList = ref<Array<any>>([])
	const dialogVisible = ref(props.modelValue)
	const ruleForm = reactive({
		parentId: 0,
		name: '',
		description: ''
	})
	const rules = reactive({
		parentId: [
			{ required: true, message: '请选择上级分类', trigger: 'change' },
		],
		name: [
			{ required: true, message: '请输入分类名称', trigger: 'blur' },
		]
	})
	/**
	 * 提交数据  编辑或者新增
	 */
	const confirm = () => {
		ruleFormRef.value?.validate(async(valid) :Promise<any> => {
			if (!valid) return false
			const { message } = itemId.value ? await editGoodsCateApi(ruleForm,itemId.value) : await addGoodsCateApi(ruleForm)
			ElMessage.success(message)
			handleClose()
		});
	}
	const editFuon = (row:any) => {
		Object.getOwnPropertyNames(row).forEach((item)=>{
			if(!ruleForm.hasOwnProperty(item)) return
			if(item == 'parentId'){
				ruleForm[item] = row[item] || 0
			}else{
				ruleForm[item] = row[item]
			}
		})
		itemId.value = row.id
	}
	const handleClose = () => {
		resetData()
		dialogVisible.value = false
		emits('update:modelValue', false)
		emits('change')
	}
 	const resetData = ()=>{
		itemId.value = null
		ruleForm.parent_id = 0
		ruleForm.name = ''
		ruleForm.description = ''
	}
	const changeImage = (event:Array<any>) => {
		ruleForm.description = event[0].url
		showManager.value = false
	}
	defineExpose({
		editFuon
	})
</script>

<style>
</style>